import axios from 'axios';

import React, { useState, useRef } from "react";
import { Button,Space,NavBar,TextArea,Toast } from 'antd-mobile';
import '../css/audio.css'
import { useNavigate } from 'react-router-dom';
const introduction = () => {
  const back = () =>{
      Toast.show({
          icon: 'loading',
          content: '加载中...',
          duration: 1000,
      })
      navigate('/overview')
  }
  const [introduction,setIntroduction]=useState('')
  const navigate = useNavigate();
  const add=()=>{
    let id=localStorage.getItem('id')
    axios.post('http://127.0.0.1:3000/update',{id:id,introduction:introduction}).then(res=>{
      console.log(res.data.data);
      navigate('/overview')})
  }
  return (
    <div>
        <div className='top'>
          <NavBar onBack={back}>
              自我介绍
          </NavBar>
        </div>
        <div style={{backgroundColor:'#eee',height:'100vh',paddingTop:'10px' }}>
          <div style={{backgroundColor:'#fff'}}>
            <TextArea
            showCount
            maxLength={500}
            placeholder="请输入自我介绍"
            rows={10}
            onChange={(e)=>{setIntroduction(e)}}
            />
          </div>
          <div style={{padding:'10px'}}>
            <Button onClick={add} block type='submit' size='large' style={{ backgroundColor: '#ffc426' }}>
                保存
            </Button>
          </div>
            
        </div>
        
    </div>
  );
};

export default introduction;